<template>
  <div class="root">
    <el-tabs v-model="activeName" tab-position="left" style="height: 100%">
      <el-tab-pane label="店铺照片" name="1"></el-tab-pane>
      <el-tab-pane label="店铺公告" name="0"></el-tab-pane>
      <el-tab-pane label="店铺推荐商品" name="2"></el-tab-pane>
    </el-tabs>
    <div>
      <div class="box1" v-if="activeName == '1'">
        <div class="newBox">
          <el-upload
            :show-file-list="false"
            class="upload-demo"
            :action="action + '/common/upload/file'"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div class="btnBox">上传图片</div>
          </el-upload>
          <div class="btnBox newBtnBox" @click="updateStoreDecorate">保存</div>
          <div class="btnBox newBtnBox" @click="delImg">删除图片</div>
        </div>
        <div class="textBox">
          请上传宽：1190px 高: 320px的图片，以免影响图片正常展示
        </div>
        <div class="ylText">预览图:</div>
        <div class="ylContentBox">
          <img
            :src="form.storePicture"
            style="width: 100%; height: 100%"
            alt=""
            v-if="form.storePicture"
          />
          <el-empty
            v-else
            description="暂无图片，请上传"
            :image-size="53"
            :image="require('@/assets/image/seller/kong.png')"
          ></el-empty>
        </div>
        <div class="textBox" style="text-align: center">
          （上传图片后，该图片将会在店铺首页上方进行展示，若店铺页面不需要展示图片删除即可。）
        </div>
      </div>
      <div class="box1" v-if="activeName == '0'">
        <el-input
          type="textarea"
          :autosize="{ minRows: 10 }"
          placeholder="请输入您要发布的公告内容，可以发布店铺信息变动、店铺重要通知、店铺热款商品广告文字介绍等，不可发布与平台无关的信息和广告，切勿发布虚假诱导信息。"
          v-model="form.storeNotice"
        >
        </el-input>
        <div
          class="btnBox"
          style="margin-top: 0.2rem"
          @click="updateStoreDecorate"
        >
          发布公告
        </div>
        <div class="ylText">
          当前展示公告
          <el-button type="text" @click="delGG">删除公告</el-button>
        </div>
        <div class="ylContentBox">
          <div v-if="form.storeNotice">{{ form.storeNotice }}</div>
          <el-empty description="当前还未发布公告" v-else></el-empty>
        </div>
      </div>
      <div class="box1" v-if="activeName == '2'">
        <div class="newBox">
          <div class="btnBox" @click="addShop">添加商品</div>
          <div class="textBox" style="margin-top: 0">
            （最多可设置10个热卖推荐的商品，当前已设置{{
              form.recommendProduct.length
            }}个）
          </div>
        </div>
        <div class="listBox">
          <div
            class="list"
            v-for="(item, index) in form.recommendProduct"
            :key="index"
          >
            <div class="newLisat">
              <div class="imgshop-box">
                <img :src="item.pictureOriginal" alt="" />
              </div>
              <div class="SpecificationGood">{{ item.goodsName }}</div>
              <div class="WareName-goods">
                {{ item.specification }}
              </div>
              <div class="price">
                <div>
                  <span class="icon-price">￥</span>
                  <span class="RetailPrice">{{ item.price }}</span>
                </div>
                <div class="SalesQuantity-item">
                  分销量 : {{ item.salesPoints }}
                </div>
              </div>
            </div>
            <div class="Position-replacement">
              <div class="box-position">
                <div
                  :class="index == 0 ? 'active' : ''"
                  @click="
                    updateRecommendProductOrder(item.id, 'up', index == 0)
                  "
                >
                  <i class="el-icon-back"></i>
                  前移
                </div>
                <div
                  @click="
                    updateRecommendProductOrder(
                      item.id,
                      'down',
                      index == form.recommendProduct.length - 1
                    )
                  "
                  :class="
                    index == form.recommendProduct.length - 1 ? 'active' : ''
                  "
                >
                  <i class="el-icon-right"></i>
                  后移
                </div>
              </div>
              <div class="box-position2" @click="deleteRecommendProduct(item.id)">
                <div >移除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">添加商品</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tableBox">
          <el-table
            :data="tableData"
            header-cell-class-name="tableHeader"
            style="width: 100%"
            height="51vh"
          >
            <el-table-column prop="date" label="商品图片/标题">
              <template slot-scope="scope">
                <div class="shopsData">
                  <img :src="scope.row.pictureOriginal" class="newImg" alt="" />
                  <div class="shopsDataBox">
                    <div class="nameBox">{{ scope.row.goodsName }}</div>
                    <div class="Model">{{ scope.row.storeName }}</div>
                    <div class="Model">
                      {{ scope.row.productColorNumber }}色
                      {{ scope.row.productYardNumber }}码
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="address" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="saveRecommendProduct(scope.row.id)"
                  >确认添加</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button type="primary"  class="hongBtn">
          确定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  selectStoreDecorateByStoreId,
  updateStoreDecorate,
  saveRecommendProduct,
  updateRecommendProductOrder,
  deleteRecommendProduct
} from "@/api/shopMange";
import { selectAllByParams } from "@/api/seller/cangpushop";
import imgPath from "@/utils/config";
export default {
 props:['form'],
  data() {
    return {
      dialogVisible: false,
      activeName: "1",
      textarea2: "",
      action: "",
      
      tableData: [],
      total: 0,
      formInline: {
        pageNumber: 1,
        pageSize: 10,
        goodsName: "",
        productCode: "",
        categoryId: "",
        createTime: "",
        updateTime: "",
        picturePackFlag: "",
        marketEnable: "1",
        type: "store",
      },
    };
  },
  created() {
    this.action = imgPath.imgPath;
    // this.selectStoreDecorateByStoreId();
    this.selectAllByParams();
  },
  methods: {
    //移出推荐商品
    deleteRecommendProduct(id){
      deleteRecommendProduct(
        {productId:id}
      ).then(data=>{
        if (data.code == 200) {
            this.$message({
              message: "移除成功",
              type: "success",
            });
            this.$parent.selectStoreDecorateByStoreId();
          }
      })
    },
    addShop() {
      if (this.form.recommendProduct.length < 10) {
        this.dialogVisible = true;
      } else {
        this.$message({
          message: "最多可设置10个热卖推荐的商品",
          type: "warning",
        });
      }
    },
    //修改推荐商品排序
    updateRecommendProductOrder(id, type, show) {
      if (!show) {
        updateRecommendProductOrder({
          productId: id,
          type: type,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.$parent.selectStoreDecorateByStoreId();
          }
        });
      }
    },
    //添加推荐商品
    saveRecommendProduct(id) {
      saveRecommendProduct({
        productId: id,
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.$parent.selectStoreDecorateByStoreId();
        }
      });
    },
    //获取商品列表
    selectAllByParams() {
      selectAllByParams(this.formInline).then((data) => {
        this.tableData = data.data.records;
        this.total = data.data.total;
      });
    },
    //删除图片
    delImg() {
      this.form.storePicture = "";
      this.updateStoreDecorate();
    },
    //删除公告
    delGG() {
      this.form.storeNotice = "";
      this.updateStoreDecorate();
    },
    //保存店铺装修信息
    updateStoreDecorate() {
      updateStoreDecorate(this.form).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$parent.selectStoreDecorateByStoreId();
        }
      });
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.storePicture = res.data;
    },
    //图片校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 3MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      this.loading = true;
      return true;
    },
    
  },
};
</script>
  
  <style scoped lang="scss">
.root {
  display: flex;
  /deep/ .el-tabs__item.is-active {
    color: #e22a1f;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e22a1f;
  }
  /deep/ .el-tabs__item:hover {
    color: #e22a1f;
  }
  .btnBox {
    padding: 0.08rem 0;
    background: #e22a1f;
    color: #fff;
    border-radius: 0.4rem;
    width: 1rem;
    text-align: center;
    cursor: pointer;
  }
  .box1 {
    margin-left: 0.2rem;
    .newBox {
      display: flex;
      align-items: center;
      .newBtnBox {
        margin-left: 0.2rem;
      }
    }
    .listBox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.2rem;
      width: 77vw;
      .list {
        height: 310px;
        opacity: 1;
        background: #f9f9f9ff;
        margin-right: 20px;
        margin-bottom: 40px;

        .newLisat {
          padding: 12px 12px 0;
          margin-bottom: 12px;
        }
        .Position-replacement {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .box-position {
            width: 123px;
            height: 32px;
            opacity: 1;
            background: #ebebebff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .active {
              opacity: 0.64999998;
              color: rgba(0, 0, 0, 0.45);
            }
            div {
              height: 22px;
              color: rgba(0, 0, 0, 1);
              font-size: 14px;
              font-weight: 400;
              text-align: left;
              line-height: 22px;
              cursor: pointer;
              display: flex;
              align-items: center;
            }
          }
          .box-position2 {
            width: 100px;
            height: 32px;
            opacity: 1;
            background: #ebebebff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
          }
        }
        .imgshop-box {
          width: 200px;
          height: 200px;
          opacity: 1;
          text-align: center;
          margin-bottom: 12px;
          overflow: hidden;
          background: #000;
          img {
            border: 0;
            border-style: none;
            vertical-align: middle;
            width: 100%;
          }
        }
        .SpecificationGood {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 195px;
          height: 22px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          line-height: 22px;
        }
        .WareName-goods {
          width: 195px;
          height: 22px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .icon-price {
            width: 8px;
            height: 12px;
            opacity: 1;
            color: #ec5c70;
            font-size: 12px;
            font-weight: 600;
            text-align: left;
            line-height: 12px;
          }
          .RetailPrice {
            height: 22px;
            opacity: 1;
            color: #ec5c70;
            font-size: 16px;
            font-weight: 600;
            font-family: PingFang SC;
            text-align: left;
            line-height: 22px;
          }
        }
        .SalesQuantity-item {
          height: 12px;
          opacity: 1;
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          line-height: 12px;
        }
      }
    }
    .textBox {
      font-size: 0.14rem;
      color: #a7adb8;
      margin-top: 0.2rem;
    }
    .ylText {
      color: #666666;
      font-size: 0.14rem;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .ylContentBox {
      width: 70vw;
      height: 4.12rem;
      background: #f5f7f9;
      border: 1px solid #e8e8e8;
      margin-top: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /deep/ .el-textarea__inner {
      background-color: #f5f7f9;
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .form {
      .btnBoxB {
        border: 0.01rem solid #e22a1f;
        font-size: 0.16rem;
        color: #e22a1f;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-left: 0.1rem;
        cursor: pointer;
      }
      /deep/.el-input__suffix {
        right: 5px;
      }
      /deep/ .el-form-item__content {
        display: flex;
        align-items: center;
      }
      /deep/ .el-cascader {
        width: 100%;
      }
      .bitS {
        display: flex;
      }
      .leftBtn {
        width: 1rem;
        color: #fff;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #e22a1f;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        text-align: center;
        margin-left: 0.2rem;
        cursor: pointer;
      }
      .rightBtn {
        background: #fff;
        color: #e22a1f;
        border: 0.01rem solid #e22a1f;
      }
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
.tableBox {
  /deep/ .tableHeader {
    background: #ebeff5;
    font-weight: 400;
    color: #000;
  }
  .shopsData {
    display: flex;
    .newImg {
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
    .shopsDataBox {
      margin-left: 10px;
      .nameBox {
        font-size: 14px;
      }
      .Model {
        color: #999999;
        margin-top: 8px;
        font-size: 12px;
      }
    }
  }
  .lvBox {
    color: #07c160;
  }
  .hongBox {
    color: #e22a1f;
  }
}
</style>
  